<?
        require_once('../inc/Accounts.php');
		require_once('../inc/Users.php');
        RequireLogin();
        $results = GetUsers();
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Database Access</title>
        <link type="text/css" rel="stylesheet" href="../inc/bootstrap.css" />
    </head>
    
    <body>
        
        <? include('../inc/header.php'); ?>
        <div class="container">
                        <? include('../inc/nav.php'); ?>
            <div id="contents">
            
                <? if(isset($_GET['inserted'])): ?>
                        <div class="alert alert-success">
                        <button class="close">×</button>
                        Record inserted succesfuly.
                    </div>
                <? endif; ?>
                <a href="edit.php">+ Add New User</a>
                <table class="table table-striped table-bordered table-condensed table-hover">
                    <tr>
                        <th>First Name</th><th>Last Name</th><th>User Type</th><th>Actions</th>
                    </tr>
                    <? while($rs = $results->fetch_assoc()): ?>
                        <tr class="<?=$rs['id'] == $_GET['inserted'] ? 'info' : ''?>">
                            <td><?=$rs['FirstName']?></td>
                            <td><?=$rs['LastName']?></td>
                            <td><?=$rs['Name']?></td>
                            <td>
                                <a href="details.php?id=<?=$rs['id']?>">Details</a>
                                <a class="edit-link" href="edit.php?id=<?=$rs['id']?>">Edit</a>
                                <a class="delete-link" href="delete.php?id=<?=$rs['id']?>">Delete</a>
                            </td>
                        </tr>
                    <? endwhile; ?>
                </table>
                <div id="edit-form">
                </div>
               
            </div>
        </div>
        
            <div class="modal hide fade">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3>Delete</h3>
                </div>
                <div class="modal-body">
                    <p>Are you sure etc.</p>
                </div>
            </div>
        
       <script type="application/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js">
           </script>
       <script type="application/javascript" src="../inc/bootstrap.js">
           </script>
                <script type="text/javascript">
                        $(function(){
                                $(".close").click(function(){
                                        $(this).closest(".alert").slideUp();
                                });
                                
                                var settings = {
                                        backgroundColor: '#FF8888',
                                        color: '#FFFFFF'
                                };
                                <? if(isset($_GET['inserted'])): ?>
                                        $("html, body").animate({scrollTop: $(".info").offset().top}, 2000, 'easeInOutBack');
                                <? endif; ?>
                                $(".info td").css(settings).delay(2000).animate({backgroundColor: '#FFFFFF', color: '#000000'},2000);
                                
                                //      ---------------------
                                //      Load the Insert form
                                $.get('edit.php', function(data){
                                        //$("#edit-form").html($(data).find("form"));
                                        $(data).find(".control-group").wrapAll("<tr />").wrap("<td />").closest("tr").appendTo($("table"));
                                });
                                

                                $(".delete-link").click(function(){
                                        $.get(this.href, function(data){
                                                $(".modal-body").html($(data).find("form"));
                                        })
                                        $(".modal").modal({ show: true });
                                        return false;
                                });
                                $(".edit-link").click(function(){
                                        $.get(this.href, function(data){
                                                $("#edit-form").html($(data).find("form"));
                                        })
                                        return false;
                                });
                                
                        });
                </script>        
    </body>
</html>
